<template>
  <div :class="['border-pop-up', show ? 'showPop' : 'hidenPop']">
    <!-- @click="show = false" -->
    <div class="title">
      <span>{{ title }}</span>
      <el-icon :size="20" color="#93c5f9" @click="close">
        <Close />
      </el-icon>
    </div>
    <slot name="content"></slot>
  </div>
</template>
<script>
  import { defineComponent, reactive, toRefs } from 'vue';
  // import { Close } from 'element-plus'

  export default defineComponent({
    props: {
      title: {
        type: String,
        default: '',
      },
    },
    emits: ['close'],
    setup(props, { emit }) {
      const state = reactive({
        show: false,
      });
      const open = (e) => {
        const { x, y } = e;
        let popY = y - 240;
        let popX = x - 650;
        if (popX <= 0) {
          popX = 0;
        }
        if (popY <= 0) {
          popY = 0;
        } else if (popY > 447) {
          popY = 447;
        }
        const dom = document.getElementsByClassName('border-pop-up')[0];
        dom.style.left = `${popX}px`;
        dom.style.top = `${popY}px`;
        state.show = true;
      };
      const close = () => {
        state.show = false;
        emit('close');
      };
      return {
        ...toRefs(state),
        // Close,
        close,
        open,
      };
    },
  });
</script>
<style lang="less" scoped>
  .border-pop-up {
    position: absolute;
    left: 22%;
    top: 19%;
    z-index: 99;
    width: 31vw;
    min-height: 45vh;
    padding: 0.9vw 1vw 1vw 1.5vw;
    box-sizing: border-box;
    background: url(../../assets/images/analysis/popover_bg.png) no-repeat;
    background-size: 107.5% 100%;
    color: white;
    transition: all 0.3s;
    .title {
      font-size: 17px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #ffffff;
      text-shadow: 0px 0px 5px #4e85ff, 0px 1px 5px #0093ff;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    p {
      line-height: 3;
      span {
        text-align: right;
        opacity: 0.6;
        display: inline-block;
        width: 47%;
        margin-right: 3%;
      }
    }
  }
  .showPop {
    animation: showPopKey 1s ease-in-out 0s 1 alternate forwards;
  }
  .hidenPop {
    animation: hidenPopKey 1s ease-in-out 0s 1 alternate forwards;
  }
  @keyframes showPopKey {
    0% {
      opacity: 0.85;
      transform: translateY(100%);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes hidenPopKey {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(100%);
    }
  }
</style>
